<template>
  <div class="user">
    <div class="user-content">
      <div class="user-content__top">
        <div class="user-content__top-header">
          <span class="user-content__top-header-title">Ant Design</span>
        </div>
        <div class="user-content__top-desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
      </div>
      <div class="user-content__main">
        <a-tabs>
          <a-tab-pane key="1" tab="账号登录">
            <a-form>
              <a-form-item v-bind="validateInfos.user">
                <a-input v-model:value="modelRef.user" size="large" placeholder="用户名：admin">
                  <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="validateInfos.password">
                <a-input
                  v-model:value="modelRef.password"
                  size="large"
                  type="password"
                  placeholder="密码：abc123"
                >
                  <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="手机号码验证登录"> Content of tab 2 </a-tab-pane>
        </a-tabs>
        <div class="user-content__main-bottom">
          <a-checkbox v-model:checked="autoLogin"> 自动登录 </a-checkbox>
          <a>忘记密码</a>
        </div>
        <a-button
          type="primary"
          html-type="submit"
          block
          size="large"
          class="user-content__button"
          @click="handleSubmit"
        >
          登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue"
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue"
import { useForm } from "@ant-design-vue/use"
import { useRouter } from "vue-router"
import { signIn } from "@/service/common/index.ts"
import { useStore } from "vuex"

export default defineComponent({
  props: {},
  components: { UserOutlined, LockOutlined },
  setup() {
    const autoLogin = ref(false)
    const $router = useRouter()
    const { commit } = useStore()

    const modelRef = reactive({
      user: "",
      password: ""
    })

    const rulesRef = reactive({
      user: [
        {
          required: true,
          message: "请输入用户名称"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入密码"
        }
      ]
    })

    const { validate, validateInfos, resetFields } = useForm(modelRef, rulesRef)

    const handleSubmit = (e: Event) => {
      e.preventDefault()
      validate()
        .then(res => {
          signIn({
            username: res.user,
            password: res.password
          }).then(result => {
            const { token } = result
            if (token) {
              commit("SET_TOKEN", token)
              $router.replace({
                path: "/sys/menu"
              })
            }
          })
        })
        .catch(err => {
          console.log("error", err)
        })
    }
    return {
      modelRef,
      validateInfos,
      resetFields,
      handleSubmit,
      autoLogin
    }
  }
})
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: #f0f2f5;

  &-content {
    padding: 80px 0;
    flex: 1 1;
    &__top {
      text-align: center;
      &-header {
        &-title {
          position: relative;
          top: 2px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 600;
          font-size: 33px;
          font-family: Avenir, helvetica neue, Arial, Helvetica, sans-serif;
        }
      }
      &-desc {
        margin-top: 12px;
        margin-bottom: 40px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }

    &__main {
      width: 368px;
      margin: 0 auto;
      &-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    &__button {
      width: 100%;
      margin-top: 24px;
    }
  }
}

@media (min-width: 768px) {
  .user {
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;
  }
}
</style>

<style>
.ant-form-horizontal .ant-form-item-control-wrapper {
  flex: 1 1;
}
</style>
